<!DOCTYPE html>
<html  lang="en">
    <head>
        <title>Document</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style type="text/css"> 
            *{
              margin: 0px;
              padding: 0px;
            }   
            html,body{
              width: 100%;
              height: 100%;
            }
           footer ul {
            display: flex;
            position: fixed;
            left: 0px;
            bottom: 0px;
            width: 100%;
            height: 40px;
           }   
           footer ul li {
            flex: 1;
            text-align: center;
            list-style: none;
            height: 40px;
            line-height: 40px;
            background: gray;
           }
        </style>
    </head>

    <body>
        <div id="app">
            <!-- <keep-alive>是Vue内置组件,用于记住组件之前的状态 -->
            <keep-alive>
                <!-- <component>是Vue内置组件,通过is属性指定具体显示的组件 -->
                <component :is="who"></component>
            </keep-alive>          

            <footer>
                <ul>
                    <li><a  @click="who='home'">首页</a> </li>
                    <li><a  @click="who='list'">列表页</a></li>
                    <li><a @click="who='shopcar'">购物车</a></li>
                </ul>
            </footer>
        </div>

        <script>
            let vm = new Vue({
                el: '#app',
                data: {
                    who: 'home',
                },
                components: {
                    home: {
                        template: `<div><h1>home</h1><input></div>`,
                    },
                    list: {
                        template: `<h1>list</h1>`,
                    },
                    shopcar: {
                        template: `<h1>shopcar</h1>`,
                    }
                }
            })
        </script>

        
    </body>
</html>